<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>商品列表</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        //即$(document).ready(function()),dom加载完后执行
        $(function () {
            getStockList();
        })
        function getStockList() {
            $.ajax({
                type:'get',
            
                url:"http://localhost/stock/getstocklist",
                // url:"http://localhost:7000/getstocklist",
                success:function(data){
                    if (data.sku_list){
                        $(data.sku_list).each(function (n,value) {
                            //console.log(JSON.stringify(value));
                            var stockDetailClone = $(".stockDetailClone").clone();
                            stockDetailClone.addClass("stockDetail");
                            stockDetailClone.removeClass("stockDetailClone");
                            stockDetailClone.css("display","block");
                            stockDetailClone.find(".stockImage").attr("src",value.images);
                            stockDetailClone.find(".stockName").html(value.title);
                            //秒杀价格
                            var limitPrice = value.limit_price;
                            var newStockPrice = value.price;
                            //存在秒杀政策
                            if (limitPrice){
                                stockDetailClone.find(".oldStockPrice").html("￥"+parseInt(value.price));
                                newStockPrice = limitPrice;
                                lasttime(value.limit_end,stockDetailClone);
                            }else {
                                stockDetailClone.find(".oldStockPrice").remove();
                                stockDetailClone.find(".time").html("");
                            }
                            stockDetailClone.find(".newStockPrice").html(parseInt(newStockPrice));
                            stockDetailClone.attr("sku_id",value.sku_id);
                            $("#stockList").append(stockDetailClone);
                        })
                    }
                },error:function(){
                }
            });
        }

        /**
         * 立即抢购
         * @param obj
         */
        function goStockDetail(obj) {
            var sku_id = $(obj).attr("sku_id");
            if (!sku_id){
                alert("商品ID=【"+sku_id+"】");
            }
            //跳转商品详情页
            open("stockDetailPage.html?sku_id="+sku_id);
        }

        //初始化活动剩余时间
        function lasttime(limitPriceTime,htmlObj){
            var stopTime = (new Date(limitPriceTime).getTime() - new Date().getTime())/1000;//秒杀结束时间
            setInterval(function(){
                if (stopTime<0){
                    htmlObj.find(".time").html("秒杀活动已结束！");
                    return;
                }
                //天 小时 分 秒
                var days = Math.floor(stopTime/(24*3600));
                var hours =Math.floor(stopTime%(24*3600)/3600);
                var minutes = Math.floor(stopTime%3600/60);
                var seconds = Math.floor(stopTime%60);
                days = days<10?"0"+days:days;
                hours = hours<10?"0"+hours:hours;
                minutes = minutes<10?"0"+minutes:minutes;
                seconds = seconds<10?"0"+seconds:seconds;
                htmlObj.find(".time").find(".days").html(days);
                htmlObj.find(".time").find(".hours").html(hours);
                htmlObj.find(".time").find(".minutes").html(minutes);
                htmlObj.find(".time").find(".seconds").html(seconds);
                stopTime--;
            },1000);
        }
    </script>
    <style type="text/css">
        .stockDetail{
            float: left;
        }
        .time{
            line-height: 20px;
            height: 20px;
            width: 100%;
        }
        .stockName{
            width: 300px;
        }
    </style>
</head>
<body>
    <div style='padding-top: 20px;'>
        <div>
            <img src="../resources/img/StockList.png" style="width: 100%">
        </div>
        <div id="stockList" class="input-group input-group-lg" style="margin-bottom: 20px;margin-right: auto;margin-left: auto;width: 1200px;">
            <div onclick="goStockDetail(this);" spu_id="" class="stockDetailClone" style="display: none;position: relative; width: 400px;">
                <div>
                    <img style="margin-left: auto;margin-right: auto;display: block; cursor: pointer;" class="stockImage"
                         width="300" src="https://img12.360buyimg.com/mobilecms/s500x500_jfs/t1/39975/12/13078/78268/5d428ed3Ecb07159d/e03e34e6130c8df9.jpg">
                </div>
                <div class="stockName">

                </div>
                <div class="stockPrice">
                    <span style="font-size: 18px;color: #d21e20;">￥<span class="newStockPrice">12345</span></span>
                    <span style="font-size: 14px;text-decoration:line-through;color: #888888;" class="oldStockPrice">￥23456</span>
                </div>
                <div class="time">
                    <span>抢购倒计时：</span>
                    <span class="countDown days">00</span>
                    <span>天</span>
                    <span class="countDown hours">00</span>
                    <span>时</span>
                    <span class="countDown minutes">00</span>
                    <span>分</span>
                    <span class="countDown seconds">00</span>
                    <span>秒</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>